<template>
  <div class="real-time">
    <div>
      <video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto"></video>
    </div>
    <div class="chatRoom">
      <div class="chatContent" ref="chatContent">
        <div v-for="(item,index) in chatContent" :key="index">
          <font>{{item}}</font>
        </div>
      </div>
      <div class="chatForm">
        <el-input class="chatInput" ref="chatInput" v-model="input" placeholder="谈谈你的想法"></el-input>
        <el-button class="send" type="primary" @click="sendMessage">发个弹幕</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RealTime",
  mounted() {
    this.initVideo();
  },
  //组件在销毁之前执行
  destroyed() {
    this.player.dispose();
  },
  data() {
    return {
      chatContent: [
        "asdfad",
        "sdfdgfg",
        "agsgfg",
        "agsgfg",
        "agsgfg",
        "agsgfg",
        "agsgfg",
        "agsgfg"
      ],
      input: "",
      player: null,
      VideoOptions: {
        autoplay: true, // 是否自动播放
        muted: false, // 是否静音
        controls: true,
        //fluid: true, // 宽高自适应
        poster:
          "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1583802737&di=3208098906d2335fa7d0785093a729a8&src=http://a2.att.hudong.com/36/48/19300001357258133412489354717.jpg",
        techOrder: ["flash"],
        height: 350,
        sources: [
          {
            src: "rtmp://10.12.49.191:1935/live/admin",
            type: "rtmp"
          }
        ]
      }
    };
  },
  methods: {
    sendMessage() {
      this.receiveMessage(this.input);
      this.input = "";
      this.$refs.chatInput.focus();
    },
    receiveMessage(message) {
      if (message.length == 0) {
        const h = this.$createElement;
        this.$notify({
          title: "提示",
          message: h("i", { style: "color: teal" }, "发送内容不能为空")
        });
        return;
      }
      this.chatContent.push(message);
      let chatContent = this.$refs.chatContent;
      setTimeout(() => {
        chatContent.scrollTop = chatContent.scrollHeight;
      }, 20);
    },
    initVideo() {
      this.player = this.$video(
        "my-player",
        this.VideoOptions,
        function onPlayerReady() {
          // alert("播放器已经准备好了!");
          // this.on("play", function() {
          //   alert("开始/恢复播放");
          // });
          // this.on("pause", function() {
          //   alert("暂停播放");
          // });
          // this.on("ended", function() {
          //   alert("结束播放");
          // });
        }
      );
    }
  }
};
</script>

<style scoped>
.real-time {
  width: 90%;
  display: flex;
}
.chatRoom {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 3px;
}
.chatForm {
  display: flex;
  padding: 6px;
  width: 80%;
  margin-left: 4%;
}
.send {
  margin-left: 15px;
}
.chatContent {
  margin-left: 4%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  height: 330px;
  overflow: hidden;
  overflow: scroll;
}
</style>
